<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ page import="java.util.*"%>
<%@ page import="models.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Add Student</title>

<!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/foundation.css" />

<!--  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
 <script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script> -->
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<style type="text/css">
body {
	magin-top: 20px;
}

#groupButton {
	margin-top: 20px;
}
li {
	margin-left: 200px;
}
</style>
<script>
	$(function() {
		$("#datepicker").datepicker({ maxDate: "+0m +0d",minDate:"-36500d",changeMonth:true, changeYear:true });
		
		//$( "#addStudent" ).click(function() {
			if($(".errorId").text()!="") {
				$("#tfId").addClass( "error" );			
				$(".errorId").addClass("error");
			}
			if($(".errorFirstName").text()!="") {
				$("#tfFirstName").addClass( "error" );	
				$(".errorFirstName").addClass("error");
			}
			if($(".errorLastName").text()!="") {
				$("#tfLastName").addClass( "error" );	
				$(".errorLastName").addClass("error");
			}
			if($(".errorAddress").text()!="") {
				$("#tfAddress").addClass( "error" );	
				$(".errorAddress").addClass("error");
			}
			if($(".errorAge").text()!="") {
				$("#tfAge").addClass( "error" );		
				$(".errorAge").addClass("error");
			}
			if($(".errorDob").text()!="") {
				$("#datepicker").addClass( "error" );		
				$(".errorDob").addClass("error");
			}
			if($(".errorNote").text()!="") {
				$("#tfNote").addClass( "error" );	
				$(".errorNote").addClass("error");
			}
		//});
	});
</script>
</head>
<body>
	<!--  Header -->
	<div class="row">
		<div class="large-3 columns">
			<h1>
				<img src="resources/logo_fpt.jpg">
			</h1>
		</div>
		<div class="large-6 columns">
			<fieldset>
				<legend>All members</legend>
				<ul class="">
					<li>Hieptq01746</li>
					<li>Anhlvv</li>
					<li>Trangnt</li>
					<li>NgocNQ</li>
					<li>Anhnt</li>
				</ul>
			</fieldset>
		</div>
		<div class="large-3 columns" id="groupButton">
			<!-- 						<form action="list.action" method="post"> -->
			<a href="ServletController?identify=listView" class="button radius">List</a>
			<!-- 						</form> -->
			<!-- 			<form action="add.action" method="post"> -->
			<a href="ServletController?identify=addView" class="button radius">Add</a>
			<!-- 			</form> -->
			<!-- 			<form action="editupdate.action" method="post"> -->
			<a href="ServletController?identify=euView" class="button radius">Edit
				+ Update</a>
			<!-- 			</form> -->
		</div>
	</div>
	
	<!-- Body content -->
	<div class="row">
		<div class="small-6 large-centered columns" align="justify" dir="rtl">

			<fieldset>
				<legend>Add Students</legend>
				<form action="ServletController?identify=addStudent" method="post">
					<!-- ID -->
					<div class="row">
						<div class="small-8">
							<div class="row">
								<div class="small-4 columns">
									<label for="right-label" class="right inline">ID</label>
								</div>
								<div class="small-8 columns">
									<input type="text" name="id" id="tfId" value="${id}" placeholder="Press ID">
									<small class="errorId" >${listError[0]}</small> 
								</div>
							</div>
						</div>
					</div>
					<!-- First Name -->
					<div class="row">
						<div class="small-8">
							<div class="row">
								<div class="small-4 columns">
									<label for="right-label" class="right inline">First
										Name</label>
								</div>
								<div class="small-8 columns">
									<input type="text" name="firstName" id="tfFirstName" value="${firstName}"
										placeholder="Press First Name">
										<small class="errorFirstName">${listError[1]}</small>
								</div>
							</div>
						</div>
					</div>
					<!-- Last Name -->
					<div class="row">
						<div class="small-8">
							<div class="row">
								<div class="small-4 columns">
									<label for="right-label" class="right inline">Last Name</label>
								</div>
								<div class="small-8 columns">
									<input type="text" name="lastName" id="tfLastName"value="${lastName}"
										placeholder="Press Last Name">
										<small class="errorLastName">${listError[2]}</small>
								</div>
							</div>
						</div>
					</div>
					<!-- Address -->
					<div class="row">
						<div class="small-8">
							<div class="row">
								<div class="small-4 columns">
									<label for="right-label" class="right inline">Address</label>
								</div>
								<div class="small-8 columns">
									<input type="text" name="address" value="${address}" id="tfAddress" placeholder="Press Address">
									<small class="errorAddress">${listError[3]}</small>
								</div>
							</div>
						</div>
					</div>
					<!-- Age -->
					<div class="row">
						<div class="small-8">
							<div class="row">
								<div class="small-4 columns">
									<label for="right-label" class="right inline">Age</label>
								</div>
								<div class="small-8 columns">
									<input type="text" name="age" value="${age}" id="tfAge" placeholder="Press Age">
									<small class="errorAge">${listError[4]}</small>
								</div>
							</div>
						</div>
					</div>
					<!-- DOB -->
					<div class="row">
						<div class="small-8">
							<div class="row">
								<div class="small-4 columns">
									<label for="right-label" class="right inline">Date Of
										Birth</label>
								</div>
								<div class="small-8 columns">
									<input type="text" name="dob" value="${dob}" id="datepicker"  />
									<small class="errorDob">${listError[5]}</small>
								</div>
							</div>
						</div>
					</div>
					<!-- Note -->
					<div class="row">
						<div class="small-8">
							<div class="row">
								<div class="small-4 columns">
									<label for="right-label" class="right inline">Note</label>
								</div>
								<div class="small-8 columns">
									<input type="text" name="note" value="${note}" id="tfNote" placeholder="Press Note">
									<small class="errorNote">${listError[6]}</small>
								</div>
							</div>
						</div>
					</div>
					<!-- Add button -->
					<div class="row">
						<div class="small-8">
							<div class="row">
								<div class="small-12 columns">
									<input type="submit" value="Add Student" class="button" id="addStudent" />
								</div>
							</div>
						</div>
					</div>
				</form>
			</fieldset>
			<hr>
		</div>
	</div>

	<script>
		document.write('<script src='
				+ ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery')
				+ '.js><\/script>')
	</script>
	<script src="js/foundation.js"></script>
	<script src="js/foundation.alerts.js"></script>
	<script src="js/foundation.clearing.js"></script>
	<script src="js/foundation.cookie.js"></script>
	<script src="js/foundation.dropdown.js"></script>
	<script src="js/foundation.forms.js"></script>
	<script src="js/foundation.joyride.js"></script>
	<script src="js/foundation.magellan.js"></script>
	<script src="js/foundation.orbit.js"></script>
	<script src="js/foundation.placeholder.js"></script>
	<script src="js/foundation.reveal.js"></script>
	<script src="js/foundation.section.js"></script>
	<script src="js/foundation.tooltips.js"></script>
	<script src="js/foundation.topbar.js"></script>
	<script src="js/foundation.interchange.js"></script>
	<script>
		$(document).foundation();
	</script>
</body>
</html>